<template>
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
    </router-view>
    <update-modal v-model:show="updateModalData.show" :item="updateModalData.item" @submit="updateModalData.submit"></update-modal>
</template>
<script>
import { inject, onMounted, reactive } from 'vue'
// import UpdateModal from './components/Modal/UpdateModal.vue'
// import {dealUrl} from './utils/common.js'
// import {NewApi} from './api/index.js'
import UpdateModal from './components/Modal/UpdateModal.vue'
import {dealUrl} from '@@/utils/common.js'
import {NewApi} from '@@/api/api.js'
import recruit from '@@/components/Recruit/index.vue'

export default {
  components:{
    UpdateModal
  },
  setup(props) {
    const vueState = inject('vueState')
    const updateModalData = reactive({
      show:false,
      item:{},
      showModal:()=>{
        updateModalData.show = true
      },
      submit:(item)=>{
        const {url,downloadUrl,channel} = item
        const unDealUrl = `${url}?downloadUrl=${downloadUrl}&channel=${channel}`
        window.AdSDK.openBrowser(dealUrl(unDealUrl,'clickUpdateButton'))
        window.trackEvent({pageTitle:'app',ev:'clickUpdateButton'})
      }
    })
    const getUpdateInfo = ()=> {
      NewApi.GetForceUpdateInfo({channel:`${vueState.pageInfo.channel}_update`}).then((res)=>{
        updateModalData.item = res
        updateModalData.showModal()
        window.trackEvent({pageTitle:'app',ev:'showUpdatePopup'})
      })
    }
    onMounted(()=>{
        // window.$EventCenter.setEventCallback('app', 'afterRegist', () => {
        //   console.log(vueState.versionControl.needUpdate,vueState.versionControl.version,'version');
        //   vueState.versionControl.needUpdate && getUpdateInfo()
        // })
    })
    return {
      vueState,
      updateModalData
    }
  }
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.modal-transparent{
  background-color: transparent !important;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 100%;
  user-select: none;
  font-family: DM Sans, DM Sans-Medium;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
html,body{
  height: 100%;
  background-color: white;
}

#app{
  height: 100%;
  /* padding-bottom: .6rem; */
  /* padding-top: .44rem; */
}

</style>